<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>defer属性的使用(The use of the defer attribute)</title>
  <script src="./js/test.js" defer></script>
  <script src="./js/demo.js" defer></script>
  <!-- 
  在HTML中，defer 属性用于 script 标签，以控制 JavaScript 文件的加载和执行。使用 defer 属性可以提高网页的性能和用户体验。
  一、defer 属性的定义
  - 定义：defer 属性是一个布尔属性，表示当脚本被下载后，应该在文档完全解析后再执行该脚本。
  - 用法：通常与外部 JavaScript 文件一起使用，即 script 标签添加属性defer。

  二、defer 属性的特点
  1. 异步加载：
    - 使用 defer 属性的脚本会在文档解析过程中异步加载，不会阻塞 HTML 的解析。这意味着浏览器可以继续解析后续的 HTML 内容，而不需要等待脚本下载完成。

  2. 执行顺序：
    - 使用 defer 属性的多个脚本会按照它们在文档中出现的顺序依次执行。这一点与 async 属性不同，后者的脚本可能会乱序执行。

  3. 文档解析完成后执行：
    - defer 属性的脚本会在文档的解析完成后执行，确保在脚本执行时，DOM 已经完全构建好。这使得开发者可以安全地操作 DOM，而不必担心元素尚未加载的问题。

  总结
  - defer 属性用于 script 标签，允许脚本异步加载并在文档解析完成后执行。
  - 使用 defer 可以提高页面加载性能，避免阻塞 HTML 的解析。
  - defer 属性的脚本会按照它们在文档中的出现顺序执行，适合需要依赖 DOM 完全构建的场景。
    -->
</head>
<body>

  <p>test.js 和 demo.js 会异步加载，并在文档解析完成后按照顺序执行。</p>
  <div id="app">app</div>
  <div class="box"></div>
  <div id="title">title</div>
  <div id="nav">nav</div>
  <div id="product">product</div>
  
  <script>
    /**
     * defer 属性的作用是告诉浏览器在解析完 HTML 文档后再执行 JavaScript 文件。
     * 这样可以确保在执行 JavaScript 代码时，HTML 文档已经完全加载和解析。
     * 1.下载需要很长的事件, 并且执行也需要很长的时间
     * 总结一: 加上defer之后, js文件的下载和执行, 不会影响后面的DOM Tree的构建
     * 总结二: defer代码是在DOMContentLoaded事件发出之前执行
    */
    
    console.log('defer属性的使用(The use of the defer attribute)')
    window.addEventListener('DOMContentLoaded', function () {
      console.log('DOMContentLoaded')
    })
  </script>

  <h1>defer属性的使用(The use of the defer attribute)</h1>
  
</body>
</html>